<template>
    <van-popup
        class="vpopup"
        v-model:show="visible"
        :position="position"
        :overlay="overlay"
        :teleport="teleport"        
    >
        <div class="wrap">
            <div class="head">
                <div><slot name="title"></slot></div>
                <span class="btn" @click="togglePopup"><i class="fa fa-close"></i></span>
            </div>
            <div class="body">
                <slot></slot>
            </div>
        </div>
    </van-popup>
</template>

<script>
import { ref } from 'vue'
import { Popup as VanPopup } from 'vant'
export default {
    name: 'Popup',
    components: {
        VanPopup
    },
    props: {
        // 是否遮罩
        overlay: {
            type: Boolean,
            default: false
        },
        // 弹出方向
        position: {
            type: String,
            default: 'bottom'
        },
        // 挂载节点
        teleport: {
            type: String,
            default: 'body'
        }
    },
    setup() {
        const visible = ref(false)
        const togglePopup = () => {
            visible.value = !visible.value
        }
        const show = () => {
            visible.value = true
        }
        const hide = () => {
            visible.value = false
        }
        return {
            visible,
            show,
            hide,
            togglePopup
        }
    }
}
</script>

<style lang="scss" scoped>
  .vpopup{
    top: 0;
  }  
  .head{
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 15px;
    height: 44px;
    background-color: #fff;
    .btn {
      display: flex;
      align-items: center;
      height: 100%;
      .fa{
        font-size: 22px;
        color: $color-text-secondary;
      }
    }
  }
  .body{
    padding: {
      left: 10px;
      right: 10px;
    }
  }
</style>